<template>
  <div class="create-live">
    <div class="live-title">新建/编辑直播</div>
    <section v-loading="loading" class="live-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px" class="form">
        <el-form-item label="直播活动名称" prop="liveName">
          <el-input v-model="form.liveName" placeholder="请输入直播名称" />
        </el-form-item>

        <el-form-item label="直播封面" prop="images" required>
          <image-upload
            :key="uploadFile.imagecropperKey"
            v-model="form.images"
            :preview-id="uploadFile.viewId"
            :forever="true"
            :width="654"
            :view="uploadFile.view"
            :height="368"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadFile.isOss"
            @changeOssPath="
              (path) => {
                uploadFile.viewId = path
              }
            "
          />
        </el-form-item>
        <el-form-item label="直播间链接" class="is-required">
          <el-input v-model="form.checkUrl" placeholder="请输入直播间链接" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="直播开始时间" prop="liveStartTime">
          <div class="block">
            <el-date-picker
              v-model="form.liveStartTime"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm"
              style="width: 100%;"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </div>
        </el-form-item>
        <el-form-item label="直播结束时间" prop="liveEndTime">
          <div class="block">
            <el-date-picker
              v-model="form.liveEndTime"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm"
              style="width: 100%;"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </div>
        </el-form-item>
        <el-form-item label="是否设置提前进入直播时间" prop="isBeforeEnter">
          <el-radio-group v-model="form.isBeforeEnter">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- <el-form-item label="是否必修">
          <el-radio-group v-model="definition">
            <el-radio label="1">必修</el-radio>
            <el-radio label="2">选修</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可获得学时" prop="getReward">
          <el-input v-model="getReward" placeholder="请输入可获得学时" />
        </el-form-item> -->
        <el-form-item label="直播活动描述" prop="liveDesc">
          <tinymce v-if="showtinymce" v-model="form.liveDesc" :height="300" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" placeholder="输入排序" />
        </el-form-item>
      </el-form>
    </section>
    <section class="page-footer">
      <el-button @click="handleCancel">
        取消
      </el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </section>
  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import { get, insert, update } from '../api'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'LiveManage',
  components: { Tinymce,ImageUpload },
  data() {
    return {
      loading: false,
      form: {
        liveName: '',
        liveDesc: '',
        images: '',
        liveStartTime: '',
        liveEndTime: '',
        sort: '',
        checkUrl: '',
        // 默认写死
        isBeforeEnter: '0',
        liveRange: '0',
        dockingLiveType: 'LIVETYPE_LINK',
        publishStatus: 'GIPSTSTUS01',
        status: 'ZT01',
        aduitStatus: 'AUDITRESULT02',
        isBook: '0'
      },
      // getReward: '0',
      // definition: '1',
      rules: {
        liveName: [
          { required: true, message: '请输入直播名称', trigger: 'blur' },
          { min: 1, max: 40, message: '请输入长度在1到40之间的字符', trigger: 'blur' }
        ],
        liveDesc: [{ required: true, message: '请输入直播描述', trigger: 'blur' }],
        images: [{ required: true, message: '请上传封面图片', trigger: 'change' }],
        liveStartTime: [{ required: true, message: '请设定直播开始时间', trigger: 'change' }],
        liveRange: [{ required: true, message: '请选择观众范围', trigger: 'blur' }],
        liveEndTime: [{ required: true, message: '请设置直播结束时间', trigger: 'blur' }],
        deptTrees: [{ required: true, message: '请设置部门', trigger: 'blur' }],
        isQuestion: [{ required: true, message: '请设置是否允许问答', trigger: 'blur' }],
        checkUrl: [{ required: true, message: '请设置校验地址', trigger: 'blur' }],
        isBeforeEnter: [{ required: true, message: '请选择是否设置提前进入时间', trigger: 'blur' }],
        dockingLiveType: [{ required: true, message: '请选择直播平台', trigger: 'blur' }]
      },
      state: 'create',
      uploadFile: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0,
        isOss: sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG') || false
      },
      showtinymce: false,
      templateTypeList: []
    }
  },
  created() {
    this.state = this.$route.query.type === 'u' ? 'update' : 'create'
    // 获取直播模板类型和观众类型
    if (this.state === 'update') {
      this.init()
    } else {
      this.showtinymce = true
    }
  },
  methods: {
    /**
     * 返回
     */
    handleCancel() {
      this.$router.replace({
        path: this.$filterPath('zoneResources'),
        query: { c: this.$route.query.c, id: this.$route.query.id, name: this.$route.query.name }
      })
    },
    // 获取获取直播模板类型和观众类型分类
    // 获取字点
    // 提交
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (new Date(this.form.liveStartTime) >= new Date(this.form.liveEndTime)) {
            return this.$message({
              type: 'warning',
              message: '直播开始时间不能大于或等于结束时间！'
            })
          }
          if (this.form.dockingLiveType === 'LIVETYPE_LINK' && this.form.checkUrl === '') {
            return this.$message.error('请输入直播链接')
          }

          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading'
          })
          const params = Object.assign({ imgUrl: this.uploadFile.viewId }, this.form)
          const datas = {
            areaId: this.$route.query.id,
            type: this.$route.query.c,
            source: 2,
            resources: JSON.stringify(params),
            // definition: this.definition,
            // getReward: this.getReward,
            sort: params.sort
          }
          if (this.state === 'create') {
            return new Promise((resolve, reject) => {
              insert(datas)
                .then(() => {
                  this.dialogVisible = false
                  loading.close()
                  this.$message({
                    title: '成功',
                    message: '创建成功',
                    type: 'success'
                  })
                  this.handleCancel()
                  resolve()
                })
                .catch((error) => {
                  reject(error)
                  loading.close()
                })
            })
          } else {
            datas.id = this.$route.query.i
            return new Promise((resolve, reject) => {
              update(datas)
                .then(() => {
                  this.dialogVisible = false
                  loading.close()
                  this.$message({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                  })
                  this.handleCancel()
                })
                .catch((error) => {
                  reject(error)
                  loading.close()
                })
            })
          }
        }
      })
    },
    init() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })

      get({ id: this.$route.query.i })
        .then((res) => {
          loading.close()
          if (res.data.code === '200') {
            const data = JSON.parse(res.data.data.resources)
            this.form = data
            // this.getReward = res.data.data.getReward
            // this.definition = res.data.data.definition
            this.uploadFile.viewId = data.imgUrl
            this.showtinymce = true
          }
        })
        .catch((error) => {
          loading.close(error)
        })
    }
  }
}
</script>

<style lang="scss">
.create-live {
  background-color: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  position: relative;
  .live-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    padding: 0 20px;
    border-bottom: 1px solid #dfe2e2;
    /*margin-left: 20px;*/
    &::before {
      content: '';
      position: absolute;
      width: 3px;
      @include bg-color($mainColor);
      top: 15px;
      bottom: 15px;
      left: 15px;
    }
  }
  .live-main {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    padding: 20px 0;
    bottom: 52px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }

    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }

    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    .form {
      width: 1000px !important;
      margin: 0 auto;
    }
  }
  .page-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 99;
    background-color: #fff;
    text-align: center;
    padding: 10px;
    box-shadow: 0 -3px 6px #f5f5f5;
    display: flex;
    justify-content: center;
  }
  .table-box {
    margin-bottom: 30px;
  }
  .el-input__inner {
    text-align: left;
  }
}
</style>
